<template>
  <div>
    <div v-for="item in data" :key="item.id" style="margin-top: 10px;">
      <van-panel :title="item.orderNo" desc="订单编号" :status="item.orderStatus=='1'?'待付款':item.orderStatus=='2'?'待发货':item.orderStatus=='3'?'待收货':item.orderStatus=='4'?'已收货':'已取消'">
        <div v-for="detail in item.orderDetail" :key="detail.id">
          <van-card :title="detail.itemName" :desc="detail.description" :price="formatPrice(detail.buyPrice)" :num="detail.buyNum" :thumb="detail.itemPic.split('###')[0]" @click="onClickCard(item.id)"/>
        </div>
        <div slot="footer">
          <div style="font-size: 15px">
            共{{ item.totalNum }}件&nbsp;总计：<span style="color: red" v-if="item.orderStatus=='1'">{{ formatPrice(item.totalFee) }}</span><span v-else>{{ formatPrice(item.totalFee) }}</span>
          </div>
          <div v-if="item.orderStatus==='0' || item.orderStatus==='4'">
            <van-button type="danger" size="small" @click="deleteShopOrder(item)">删除订单</van-button>
          </div>
          <div v-if="item.orderStatus==='1'">
            <van-button size="small" @click="onCancelOrder(item)">取消订单</van-button>
            <van-button type="danger" size="small" @click="toChoosePay(item)">付款</van-button>
          </div>
          <div v-if="item.orderStatus==='3'">
            <van-button type="danger" size="small" @click="doConfirmReceive(item)">确认收货</van-button>
          </div>
        </div>
      </van-panel>
    </div>
  </div>
</template>

<script>
export default {
  name: 'orderCard',
  props: {
    data: Array // 订单列表
  },
  data () {
    return {
    }
  },
  methods: {
    /**
     * 价格格式化
     */
    formatPrice (price) {
      return (price * 100 / 100).toFixed(2)
    },
    /**
     * 卡片点击事件
     */
    onClickCard (orderId) {
      this.$router.push({ name: 'orderDetail', query: { orderId: orderId } })
    },
    /**
     * 删除订单
     */
    deleteShopOrder (order) {
      const self = this
      self.$dialog.confirm({
        title: '提示',
        message: '确认删除选中订单？'
      }).then(() => { // 确认
        const param = { orderId: order.id }
        self.axios.post('api/shop/deleteShopOrder', param).then(resp => {
          if (resp.data.code !== '-1') {
            self.$toast('删除成功')
            let openId = self.$store.state.openId
            self.$emit('getOrderListByOpenIdAndOrderStatus', openId, order.orderStatus)
          } else {
            self.$toast(resp.data.msg)
          }
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => { // 取消
        // on cancel
      })
    },
    /**
     * 取消订单
     */
    onCancelOrder (order) {
      const self = this
      self.$dialog.confirm({
        title: '提示',
        message: '确认取消选中订单？'
      }).then(() => { // 确认
        const param = { orderDetail: order.orderDetail, id: order.id, orderStatus: '0' }
        self.axios.post('api/shop/updateShopOrderStatusByOrderId', param).then(resp => {
          if (resp.data.code !== '-1') {
            self.$toast('取消成功')
            let openId = self.$store.state.openId
            self.$emit('getOrderListByOpenIdAndOrderStatus', openId, order.orderStatus)
          } else {
            self.$toast(resp.data.msg)
          }
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => { // 取消
        // on cancel
      })
    },
    /**
     * 付款
     */
    toChoosePay (order) {
      this.$router.push({ name: 'pay', query: { order: order } })
    },
    /**
     * 确认收货
     */
    doConfirmReceive (order) {
      const self = this
      self.$dialog.confirm({
        title: '提示',
        message: '确认已经收到货物？'
      }).then(() => { // 确认
        const param = { id: order.id, orderStatus: '4' }
        self.axios.post('api/shop/orderReceiveConfirm', param).then(resp => {
          if (resp.data.code !== '-1') {
            self.$toast('收货完成')
            let openId = self.$store.state.openId
            self.$emit('getOrderListByOpenIdAndOrderStatus', openId, '4')
          } else {
            self.$toast(resp.data.msg)
          }
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => { // 取消
        // on cancel
      })
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.van-cell__title {
  text-align: left;
}

.van-panel__footer {
  text-align: right;
}

.van-card__content {
  text-align: left;
}

.van-card {
  background-color: white;
}

.van-card__price {
  color: black;
}
</style>
